TikTok Live overlay setup

A 1080x1920 overlay built so nothing gets cut off or covered on phones. With the import files below, setup takes about 5 minutes.

What's in this folder

Overlay/SMC-TikTok-Live-Overlay.png

The overlay. Transparent where your cam and chart show through. This is the one you use.

Overlay/SMC-TikTok-Live-Overlay-editable.html

Same overlay as a web page. Only needed if you want to change the text. Open it in Notepad, edit the words, then use it as a Browser source instead of the PNG.

Overlay/smc-logo-dark-bg.png

The SMC logo. OBS layers it into the logo spot automatically. Keep the file name exactly the same.

OBS Import/

An OBS profile (canvas set to 1080x1920, 30fps) and a scene collection with the overlay, webcam and chart already placed. This is the fast way.

Reference/TikTok-Safe-Zones.png

Where TikTok covers your stream. Red is TikTok's buttons and comments. Yellow is the edge that tall phones crop off.

Fast setup: import into OBS

  1. Move this folder to your C: drive so the path is exactly C:\SMC TikTok Live Overlay Setup. The scene collection looks for the overlay there. (If you put it somewhere else, OBS will show a Missing Files box. Click Search Directory, pick this folder, and it relinks.)
  2. In OBS, top menu Profile, Import. Select the folder OBS Import\Profile - SMC TikTok Live. Then Profile, and click SMC TikTok Live to switch to it.
  3. Top menu Scene Collection, Import. Click the ... button, pick Scene Collection - SMC TikTok Live.json, then OK. Then Scene Collection, and click SMC TikTok Live.
  4. Double-click Webcam in the Sources list and pick your camera.
  5. Double-click Chart (TradingView) and pick your TradingView browser window.
  6. Done. Everything is already sized and positioned: cam fills the top, chart fills the bottom, overlay is locked on top, and your logo sits in the top-left of the info band.
Chart fit: the chart fills everything below the black band, all the way to the bottom, and is anchored to the bottom-right. Whatever doesn't fit gets trimmed off the top and left (TradingView's toolbars and old candles). Hide TradingView's right-side icon panel so the price scale is the last thing on the right.
Hide the broker panel: the trading panel at the bottom of TradingView (positions, orders, account) is cropped off in OBS so viewers never see it.
  1. In TradingView, open the bottom panel the way you normally trade with it.
  2. In OBS, hold Alt and drag the bottom edge of the chart up until the broker panel is gone and the time axis is the last thing showing.
  3. Or type it in: right-click the chart, Transform, Edit Transform, and raise Crop Bottom until the panel disappears.
If you resize the panel in TradingView later, redo this so it stays hidden.

Then skip to step 5 below and test on your phone. Steps 1 to 4 are only for setting things up by hand.

Manual setup

Only needed if you're not using the import files, or you're in TikTok LIVE Studio.

1. Set the canvas

In OBS: Settings, then Video.

  1. Base (Canvas) Resolution: 1080x1920
  2. Output (Scaled) Resolution: 1080x1920
  3. FPS: 30

In TikTok LIVE Studio, pick the portrait (vertical) layout. It's already 1080x1920.

2. Add the sources in this order

Top of the list shows on top. Your source list should end up like this:

0. SMC LogoImage source, pick smc-logo-dark-bg.png. Place it in the empty spot at the top-left of the black band, left of the website.
1. OverlayImage source, pick SMC-TikTok-Live-Overlay.png. Right-click, Transform, Reset Transform so it sits at 0,0 at full size.
2. WebcamYour camera. Goes in the top area, above the black band.
3. ChartWindow Capture of TradingView. Goes below the black band.

Lock the overlay (click the lock icon) so you don't drag it by accident.

3. Position the cam

  1. Stretch the webcam to fill the full width of the top area. Hold Alt while dragging an edge to crop it instead of squishing it.
  2. Frame your face in the bottom half of that area, just above the black band. The top strip sits under TikTok's profile badge and viewer count. The cam is kept small on purpose so the info text can be big enough to read on a phone.
  3. Keep your face in the middle. The far left and right edges get cropped on most phones.

4. Position the chart

  1. Put the TradingView capture below the black band, filling it to the bottom of the screen, with its right edge on the blue line on the right.
  2. Keep the current candles on the right side. TikTok's comment feed covers the lower left, which is just old price history.
  3. Fit the chart inside the area left of the blue line on the right. That line marks where tall phones start cropping, so keeping the price scale left of it means it's always visible.
  4. Zoom TradingView to about 150% and use thicker lines. Viewers are on a small screen.
Overlay with TikTok's covered areas marked in red and cropped edges in yellow

5. Test before going live

  1. Record 20 seconds in OBS (or do a quick private test live).
  2. Watch it on your phone, not your computer.
  3. Check that your face, the Discord button and the current price are all visible with TikTok's UI on top.
Changing the text later: open the editable HTML in Notepad, change the words, save. In OBS, swap the Image source for a Browser source: check Local file, pick the HTML, set Width 1080 and Height 1920.